<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragment::head(title='标签')}">
</head>
<body>


<!--导航-->
<nav class="ui inverted attached segment" th:replace="~{fragment::nav(n=3)}">
</nav>


<!--中间内容-->
<div class="ui container m-padded-tb-massive">
    <div class="ui segment top attached">
        <div class="ui two column grid">
            <div class="column">
                <h3>分类</h3>
            </div>

            <div class="column right aligned">
                共<h3 class="ui header orange m-inline-block" th:text="${tagCount}"></h3>个分类
            </div>
        </div>
    </div>
    <div class="ui segment teal attached">
        <div class="ui label" th:each="tag:${tagList}">
            <a  class="ui teal basic left pointing label m-margin-tb" th:attr="data-tagid=${tag.id}" onclick="ajaxfunc(this)"><span th:text="${tag.name}"></span></a>
        </div>

    </div>


    <div class="ui segment attached" id="blog-block">
        <!--        博客内容-->
    </div>
</div>


<footer class="ui inverted vertical segment" th:replace="~{fragment::footer}">
</footer>



<th:block th:replace="~{fragment :: script}">
</th:block>

<script type="text/javascript">


    $(function () {
        $.ajax({
            url:"/user/listBlogByTagId",
            type:"get",
            success:function (res) {
                $('#blog-block').html(res);
                console.log(res);
            }
        })
    })

    //函数

    function ajaxfunc(btn){
        var tagid=$(btn).data("tagid");
        console.log("tagid----"+tagid);
        $.ajax({
            url:"/user/listBlogByTagId",
            type:"get",
            data:{
                "keytagid":tagid,
            },
            success:function (res) {
                $('#blog-block').html(res)
                console.log(res);
            }
        })
    }

    //分页函数
    function pageH(curr) {
        var currpage=$(curr).data("curr");
        $.ajax({
            url:"/user/listBlogByTagId",
            type: "get",
            data:{
                "currentPage":currpage,
            },
            success:function (res) {
                $('#blog-block').html(res)
            }
        })
    }


    $('#pay-btn').popup({
        popup:$('#pay'),
        on:'click',
        position:'bottom center',
    })
</script>
</body>
</html>